import React from "react";
import { Button, Dropdown } from "antd"
import { useNavigate } from "react-router-dom";
import type { MenuProps } from 'antd';
import Capacity from "./Capacity"
import "./index.css"

const App: React.FC = () => {
  const navigate = useNavigate();

  const onLoginOut = () => {
    localStorage.setItem("token", "");
    navigate("/login");
  }

  const items: MenuProps['items'] = [
    {
      key: '0',
      label: <Capacity />,
    },
    {
      type: 'divider',
    },
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="#">
          个人资料
      </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="#">
          资料
      </a>
      ),
    },
    {
      key: '3',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="#">
          设置
      </a>
      ),
    },
    {
      key: '4',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="#">
          关于
      </a>
      ),
    },
    {
      key: '5',
      label: (
        <a target="_self" rel="noopener noreferrer" href="#">
          下载客户端
      </a>
      ),
      children: [
        {
          key: '2-1',
          label: '用户协议',
        },
        {
          key: '2-2',
          label: '隐私政策',
        },
      ],
    },
    {
      type: 'divider',
    },
    {
      key: '6',
      label: (
        <a target="_self" rel="noopener noreferrer" href="#" onClick={() => onLoginOut()}>
          退出
      </a>
      ),
    },
  ];

  return <div>
    <Dropdown menu={{ items }} placement="bottomLeft" trigger={['click']} autoAdjustOverflow={true}>
      <Button type="primary" shape="circle" className="dropdown-button">段</Button>
    </Dropdown>
  </div>
}

export default App;